<template>
	<view class="activityDetails">
		<view class="con-box input-box">
			<view class="con-left"> 充值金额： </view>
			<input class="con-input"  @change="checkPrice" v-model="formDate.money" type="number" value="" placeholder="请输入充值金额" />
		</view>
		<view class="con-box">
			<view class="con-title"> 快捷充值 </view>
			<view class="con-con">
				<view class="con-top-flex" @click="setMoney(1000, 0)">
					<view class="con-top-num"> ￥1000 </view>
				</view>
				<view class="con-top-flex" @click="setMoney(2000, 0)">
					<view class="con-top-num"> ￥2000 </view>
				</view>
				<view class="con-top-flex" @click="setMoney(5000, 0)">
					<view class="con-top-num"> ￥5000 </view>
				</view>
			</view>
			<view class="con-con" v-if="activityInfo.list.length > 0">
				<view class="con-flex" @click="showActivity()">
					<image class="con-img" src="../static/img/cooperation.png" mode=""></image>
					<view class="con-con-left">
						 {{activityInfo.typeName}}
					</view>
					<view class="con-con-right">
						<view class="con-num">{{activityInfo.title}} </view>
						<view class="con-p"> {{activityInfo.content}} </view>
						<!-- <view class="con-p"> {{item.remark2}} </view> -->
					</view>
					<view class="con-yyw" v-if="activityInfo.is_activity == 1"> {{activityInfo.stateName}} </view>
				</view>
			</view>
		</view>
		
		<view class="remark"> 
			<view class="" style="line-height: 60rpx; font-size: 32rpx;"> 温馨提示： </view>
			<view class="" style="line-height: 54rpx; padding: 0 20rpx;" v-for="(item, index) in remarkList" :key="index"> {{item}} </view>
		</view>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="but" @click="recharge()">充值</view>
		</view>
		
		<uni-popup ref="medal" type="center" animation="ture">
		    <view class="medalInfo">
		        <view class="popbox">
		            <image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close.png"
		                mode="aspectFill"></image>
		            <view class="title">充值活动</view>
		            <scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
		                <view class="activityInfo" v-for="(item, index) in activityInfo.list" :key="index" @click="setMoney(item.money, item.id)">
		                    <view class="activityTitle">{{item.title}}</view>
		                    <view class="activityRemark">{{item.remark}}</view>
		                    <view class="activityTime">{{item.timeRand}}</view>
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</uni-popup>
	</view>
</template>

<script>
	let _self = '';
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import wechatPay from '../static/wechatPay.js';
	export default {
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				
				formDate: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    activity_id: 0,
					money: '',
				},
				moneyList: [],
				remarkList: [],
                isActivity: 0,
				activityInfo: {
					typeName: '',
					title: '',
					content: '',
					is_activity: 1,
					stateName: '',
					list: [],
				},
			}
		},
		methods: {
			getMain() {
				serve.request({
					url: '/member/recharge/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					_self.moneyList = res.data.moneyList;
                    _self.isActivity = res.data.isActivity;
                    _self.activityInfo = res.data.activityInfo;
					_self.remarkList = res.data.remark.split("\n\r");
				});
			},
			showActivity() {
				_self.$refs.medal.open();
			},
            close() {
                _self.$refs.medal.close();
            },
			/* 充值 */
			recharge(){
				serve.request({
					url: '/member/recharge/create',
					data: _self.formDate
				}).then(res => {
					if(res.code != 200) {
						uni.showModal({
						    title: '提示',
						    content: res.message,
							showCancel: false,
							success: function(res) {}
						});
						return ;
					}
					wechatPay.payItemFun(res.data.payType, res.data.itemId, '/pages/my/creditsList?type=user_money');
				});
			},
			checkPrice: function(e) {
				let price = e.detail.value;
				if (price.indexOf('.') != -1){
					let a = price.substring(0, price.indexOf('.'));
					_self.formDate.money = a;
				}else{
					_self.formDate.money = price;
				}
				console.info(_self.formDate.money);
				_self.$forceUpdate();
			},
			setMoney(val, aid){
				if(aid == 1 && _self.activityInfo.is_activity == 1) {
					uni.showToast({
						title: "已参与了活动，无法重新参与！",
						icon: 'none'
					});
					return ;
				}
				_self.formDate.money = val;
                _self.formDate.activity_id = aid;
				_self.close();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			_self.formDate.money = options.money || '';
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
			_self.getMain();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	

	
	.con-box{
		position: relative;
	} 
	.input-box{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 2rpx solid #ededed;
		padding: 16rpx 0;
	}
	.con-left{
		padding-right: 30rpx;
	}
	.con-input{
		width: 460rpx;
		height: 60rpx;
		border: 2rpx solid #ededed;
		color: #dd6161;
		font-size: 30rpx;
		padding-left: 20rpx;
	}
	.con-box{margin: 20rpx 0;}
	.con-title{
		font-size: 30rpx;
	}
	.con-con{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		/* justify-content: flex-start; */
		justify-content: center;
	}
	.con-top-flex{
		width: 140rpx;
		background: #f5f5f5;
		padding: 20rpx 16rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		color: #333;
		text-align: center;
	}
	.con-top-num{
		color: #333;
		font-size: 34rpx;
	}
	.con-flex{
		width: 580rpx;
		min-height: 120rpx;
		background: #f5f5f5;
		padding: 20rpx 16rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* flex-direction: column; */
		position: relative;
		color: #333;
		text-align: center;
	}
	.con-num{
		color: #333;
		font-size: 40rpx;
	}
	.con-img{
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		right: -2rpx;
		top: -6rpx;
	}
	.con-con-left{
		flex: 2.5;
		height: 100%;
		font-size: 42rpx;
	}
	.con-con-right{
		flex: 6.5;
		border-left: 2rpx solid #000000;
		text-align: left;
		padding-left: 20rpx;
	}
	.con-yyw{
		position: absolute;
		transform: rotate(-45deg);
		border-bottom: 2rpx solid #FF5F60;
		font-size: 36rpx;
		padding-bottom: 2rpx;
		color: #FF5F60;
		bottom: 34rpx;
		right: 8rpx;
	}
	
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.medalInfo {
	    width: 80vw;
	    max-height: 90vh;
	    min-height: 30vh;
	    overflow: hidden;
	    z-index: 200;
	}
	.popbox {
	    max-height: 900upx;
	    padding: 20upx;
	    overflow: hidden;
	    position: relative;
	    border-radius: 20upx;
	    background: #fff;
	}
	
	.close {
	    position: absolute;
	    width: 30upx;
	    height: 30upx;
	    right: 50upx;
	    top: 50upx;
	    z-index: 666;
	}
	
	.title {
	    width: 100%;
	    height: 100upx;
	    line-height: 100upx;
	    font-size: 32upx;
		text-align: center;    
		border-bottom: 1rpx dashed #ccc;
	}
	.scroll{
		max-height: 500upx;
	    margin-top: 20upx;
	}
	.activityInfo {
		box-sizing: border-box;    
		box-sizing: border-box;
		border: 1upx solid #eee;
		padding: 10upx 20upx;
		margin-bottom: 20upx;
	}
	.activityTitle {
		font-size: 28upx;
	}
	.activityRemark {
		font-size: 26upx;
	}
	.activityTime {
		font-size: 26upx;
	}
</style>
